import React from "react";
import {Input, Tooltip} from 'antd';
import BaseField from "../Base/BaseField";
import {isArray, isBoolean, isEqual, isFunction, isNumber, omit, pick} from "lodash-es";
import PropTypes from "prop-types";
import NumberBase from "./NumberBase";
import {isObjectValEqual} from "jh-utils";

export default class RangeBase extends BaseField {

    static propTypes = {
        ...BaseField.propTypes,
        value: PropTypes.any,
        defaultValue: PropTypes.any
    };

    mainRender(context) {
        const props = this.props;
        const width = props.style && props.style.width ? props.style.width : '100%';
        const {value} = this.state;
        let minVal = '';
        let maxVal = '';
        if(isArray(value)) {
            minVal = value[0];
            maxVal = value[1];
        }
        const w = `calc((${width} - 30px) / 2)`;
        return (
            <>
                <NumberBase
                    value={minVal}
                    onChange={(val) => {
                        const value = isArray(this.state.value) ? [...this.state.value] : [];
                        value[0] = val;
                        this.hdlValueChange(value);
                    }}
                    style={{width: w, marginRight: '-1px'}}
                    {...pick(props, ['floatNum', 'format'])}
                />
                <Input
                    className="site-input-split"
                    style={{
                        width: 31,
                        borderLeft: 0,
                        borderRight: 0,
                        pointerEvents: 'none',
                        background: '#fff',
                        display: 'inline-block'
                    }}
                    placeholder="~"
                    disabled
                />
                <NumberBase
                    value={maxVal}
                    onChange={(val) => {
                        const value = isArray(this.state.value) ? [...this.state.value] : [];
                        value[1] = val;
                        this.hdlValueChange(value);
                    }}
                    {...pick(props, ['floatNum', 'format'])}
                    style={{
                        width: w,
                        borderLeft: 0,
                        marginRight: '-1px'
                    }}/>
            </>
        );
    }
}